/**
 * 毕业模版的添加
 */
<template>
  <div class="addgraduationtemplate_box">
    <!-- 基本信息 -->
    <div class="basic">
      <el-form
         v-if="active == 1"
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="证书名称" prop="name">
          <el-input :disabled='true' v-model="ruleForm.certificateName"></el-input>
        </el-form-item>
        <el-form-item label="证书名称" prop="region">
          <el-select :disabled='true' v-model="ruleForm.certificateType" placeholder="请选择证书类型">
            <el-option 
              v-for="(item, index) in typelist"
              :key="index"
              :label="item.typeName"
              :value="item.typeName">

            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证书背景图" prop="name">
          <!-- 上传图片 -->
         <!-- 上传图片 -->
          <el-upload
          :disabled='true'
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="ruleForm.certificateSettingImg" :src="ruleForm.certificateSettingImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item>
        <el-form-item label="备注信息" prop="name">
          <textarea
          :disabled='true'
           v-model="ruleForm.remark"          
            placeholder="请输入备注信息"
            cols="30"
            rows="10"
            style="width: 300px; height: 100px"
          ></textarea>
        </el-form-item>
         <el-form-item label="学生姓名">
    <el-input v-model="ruleForm.cnName" :disabled='true' placeholder="姓名"></el-input>
  </el-form-item><br/>
  <!-- <el-form-item label="个人图片">
    <el-input style='width:100px;' v-model="ruleForm.certificateDesignImg.certificateDesignImg" placeholder="姓名"></el-input>
  </el-form-item><br/> -->
  <el-form-item  label="学生性别">
    <el-select v-model="ruleForm.enName"  :disabled='true' placeholder="性别">
      <el-option label="男" value="男"></el-option>
      <el-option label="女" value="女"></el-option>
    </el-select>
  </el-form-item>
      </el-form>
    </div>
    <!-- 设计证书 -->
    <div class="basic designCertificate" v-if="active == 2">
      <div class="box_left">
        <img src="../../assets/logo.png" alt="" />
      </div>
      <div class="box_rigth">
        <div class="header">常用工具</div>
        <div class="ficate_box">
          <p>插入考生信息</p>
          <ul>
            <li>考生姓名</li>
            <li>考生账号</li>
            <li>头像</li>
            <li>人脸照片</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 证书设置 -->
    <div class="basic designSettings" v-if="active == 3">
      <p>
        证书限制：<el-radio v-model="ruleForm.certificateAstrict" label="1"
          >允许所有毕业或结业学生使用</el-radio
        >
      </p>
      <p>
        有效期限制： <el-radio v-model="ruleForm.usefulLife" label="2">证书永久有效</el-radio>
      </p>
    </div>
    <div class="btn_box">
      <el-button type="primary" @click="$router.go(-1)">返回</el-button>
    </div>
  </div>
</template>
<script>
import {
  getNationApi
} from "@/api/basics/classroom";
import {
Certificatedeta
} from "@/api/graduation/Graduationtemplate";
export default {
  data() {
    return {
        active: 1,
      ruleForm: {
        certificateName: "",
        certificateType:'',
        certificateSettingImg:'',
        remark:'',
        certificateAstrict:'',
        usefulLife:'',
        cnName:'',
        enName:''
      },
      typelist:'',
      //   单选框
      //   上传图片
      imageUrl:'',
      id:0,
      isLoading: false,
    };
  },
  mounted() {
    this.id=localStorage.getItem('id')
    this.gettreeList()
    this.deatilist()
  },
  methods: {
    async deatilist(){
      let res=await Certificatedeta({id:this.id})
      console.log('555',res)
       this.ruleForm.certificateName=res.data.certificateName
       this.ruleForm.certificateType=res.data.certificateType
       this.ruleForm.remark=res.data.remark
       this.ruleForm.certificateSettingImg=res.data.certificateSettingImg
       this.ruleForm.cnName=res.data.certificateDesignImg[0].cnName
       this.ruleForm.enName=res.data.certificateDesignImg[1].enName
       console.log('333',this.ruleForm.enName)
       
    },
     //类型
    async gettreeList(){
     let res=await getNationApi({parentId:209}) 
     console.log('233',res)
     this.typelist=res.rows
     console.log('23',this.typelist)
   },
 // // 上传图片
     handleAvatarSuccess(res, file) {
        this.ruleForm.certificateSettingImg = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }

    
  },
};
</script>
<style lang="scss">
.addgraduationtemplate_box {
  width: 97%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 10px;
  .basic {
    width: 700px;
    // background: #ccc;
    margin: 10px auto;
    .el-form {
      .el-form-item {
        margin-left: 100px;
        .el-input {
          width: 300px;
        }
        .el-select {
          width: 300px;
        }
      }
    }
  }
  .designCertificate {
    display: flex;
    justify-content: space-between;
    // background: #ccc;
    .box_left {
      width: 60%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
      // background: red;
    }
    .box_rigth {
      width: 35%;
      height: 100%;
      //   background: gold;
      border: 1px solid #ccc;
      .header {
        height: 40px;
        line-height: 40px;
        border: 1px solid #ccc;
        text-align: center;
      }
      .ficate_box {
        p {
          margin: 10px 0;
        }
        ul {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          li {
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            text-align: center;
            margin: 5px 0;
          }
        }
      }
    }
  }
  .designSettings {
    p {
      margin: 20px 200px;
    }
  }
  .btn_box {
    padding: 20px 0px;
    width: 200px;
    // background: #ccc;
    margin: 0 auto;
    .el-button{
        margin: 0 10px;
    }
  }
}
// 上传图片
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  // border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>